<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script  type="text/javascript" src="/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script>
        var rows = 10 ;
        function findPage(page) {
        $("#pageFrom").prop("action","/user/findPage?page="+page+"&rows="+rows);
        $("#pageFrom").submit();
        }
        function save() {
                $("#saveFrom").prop("action","/user/saveAdd");
                $("#saveFrom").submit();
        }
        function del(eid) {
            if(confirm("确定删除吗？")){
                $.get("/user/del/"+eid,
                    function (data) {
                        if(data.success){
                            window.location.reload();
                        }else{
                            alert(data.message);
                        }
                    })
            }
        }
        function update(eid) {
            $.get("/user/update/"+eid,
            function (data) {
                if(data){
                    $("#ename").val(data.ename);
                    $("#esalary").val(data.esalary);
                    $("#eid").val(data.eid);
                }
            })
        }
        function shua() {
            $("#ename").val("");
            $("#esalary").val("");
            $("#eid").val("");
        }


    </script>
</head>
<body class="container" style="margin-top: 50px">
<div class="panel panel-info">
    <div class="panel-heading">
    查询员工信息
    </div>
    <div class="panel-body">
        <form id="pageFrom" class="form-inline"  method="post">

            <div class="form-group">
                <input th:value="${empVo.ename}" type="text" class="form-control" name="ename"  placeholder="请输入查询的姓名" >
            </div>
            <div class="form-group">
                <input th:value="${empVo.getBeginSalary()}" type="text" class="form-control" name="beginSalary" placeholder="请输入起始工资" > --
                <input th:value="${empVo.getEndSalary()}" type="text" class="form-control" name="endSalary"  placeholder="请输入结束工资" >
            </div>
            <button type="button" class="btn btn-success" th:onclick="|findPage(${pageInfo.pageNum})|">搜索</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
        </form>
        <table class="table table-striped">
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工工资</th>
                <th>操作</th>
            </tr>
            <tr th:each="emp : ${page}">
                <td th:text="${emp.eid}">王八</td>
                <td th:text="${emp.ename}">123</td>
                <td th:text="${emp.esalary}">123</td>
                <td>
                    <button class="btn btn-warning btn-sm" type="button" data-toggle="modal" data-target="#myModal"
                            th:onclick="|update(${emp.eid})|">修改</button>
                    <button class="btn btn-danger btn-sm" type="button" th:onclick="|del(${emp.eid})|">删除</button>
                </td>
            </tr>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li >
                    <a th:class="${  pageInfo.hasPreviousPage ? '' : 'btn disabled'}"  href="javascript:void(0)"  aria-label="Previous" th:onclick="|findPage(${pageInfo.prePage})|">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
<!--        根据总页数循环页码数        -->
                <li th:class="${page==pageInfo.pageNum ? 'active' : ''}" th:each="page : ${#numbers.sequence(1,pageInfo.pageNum+4)}">
                    <a href="javascript:void(0)" th:onclick="|findPage(${page})|"><span th:text="${page}"></span></a></li>
                <li >
                    <a th:class="${pageInfo.hasNextPage ? '' : 'btn disabled'}"  href="javascript:void(0)"  aria-label="Next" th:onclick="|findPage(${pageInfo.nextPage})|">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" th:onclick="shua()">&times;</span></button>
                <h4 class="modal-title">员工添加修改操作</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="saveFrom">
                    <input id="eid" name="eid" type="hidden">
                    <div class="form-group">
                        <label for="ename">员工名称</label>
                        <input type="text" class="form-control" id="ename" name="ename" placeholder="请输入员工姓名">
                    </div>
                    <div class="form-group">
                        <label for="esalary">员工工资</label>
                        <input type="number" class="form-control" id="esalary" name="esalary" placeholder="请输入员工工资">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" th:onclick="shua()" >关闭</button>
                <button type="button" class="btn btn-primary" th:onclick="save()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>